import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {
    state = {
        name: 'jerry'
    }
    render() {
        const {name} = this.state
        console.log('@@parent@@')
        return (
            <div className='aContainer'>
                <h3>Parent组件</h3>
                <h4>用户名：{name}</h4>
                <ChildA name={name} render={(data) => <ChildB name={data}/>}/>
            </div>
        )
    }
}

class ChildA extends PureComponent {
    
    state = {
        name: 'tom'
    }

    render() {
        const {name} = this.state
        console.log('@@ChildA@@')
        return (
            <div className='bContainer'>
                <h3>ChildA组件</h3>
                <h4>从Parent组件接收到数据：{this.props.name}</h4>
                {this.props.render(name)}
            </div>
        )
    }
}

class ChildB extends PureComponent {
    
    render() {
        console.log('@@ChildB@@')
        return (
            <div className='cContainer'>
                <h3>ChildB组件</h3>
                <h4>从ChildA组件接收到数据：{this.props.name}</h4>
            </div>
        )
    }
}